<template>
  <div class="finance-reconciliation">
    <!-- 面包屑导航 -->
    <div class="breadcrumb">
      <el-breadcrumb separator="/">
        <el-breadcrumb-item>首页</el-breadcrumb-item>
        <el-breadcrumb-item>客户结算</el-breadcrumb-item>
        <el-breadcrumb-item>对账单管理</el-breadcrumb-item>
      </el-breadcrumb>
    </div>

    <!-- 查询条件 -->
    <el-card class="search-card">
      <div class="search-title">查询条件</div>
      <el-form :inline="true" :model="searchForm" class="search-form">
        <el-form-item label="对账单号：">
          <el-input v-model="searchForm.reconciliationNo"></el-input>
        </el-form-item>
        <el-form-item label="客户订单号：">
          <el-input v-model="searchForm.customerOrderNo"></el-input>
        </el-form-item>
        <el-form-item label="客户名称：">
          <el-input v-model="searchForm.customerName"></el-input>
        </el-form-item>
        <el-form-item label="签收日期：">
          <el-date-picker
            v-model="searchForm.signDate"
            type="date"
            placeholder="选择日期"
            value-format="yyyy-MM-dd">
          </el-date-picker>
          <span class="date-separator">-</span>
          <el-date-picker
            v-model="searchForm.signDateEnd"
            type="date"
            placeholder="选择日期"
            value-format="yyyy-MM-dd">
          </el-date-picker>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="handleSearch">查 询</el-button>
          <el-button @click="handleReset">重 置</el-button>
        </el-form-item>
      </el-form>
    </el-card>

    <!-- 对账单列表 -->
    <el-card class="table-card">
      <div class="table-operations">
        <div class="left-operations">
          <el-checkbox v-model="customerConfirm">客户确认</el-checkbox>
          <el-button icon="el-icon-refresh">刷新</el-button>
          <el-button icon="el-icon-download">下载</el-button>
        </div>
        <div class="tabs">
          <el-radio-group v-model="activeTab">
            <el-radio-button label="未确认">未确认</el-radio-button>
            <el-radio-button label="已确认">已确认</el-radio-button>
            <el-radio-button label="全部">全部</el-radio-button>
          </el-radio-group>
        </div>
      </div>

      <el-table :data="tableData" style="width: 100%">
        <el-table-column type="selection" width="55"></el-table-column>
        <el-table-column prop="reconciliationNo" label="对账单号"></el-table-column>
        <el-table-column prop="customerName" label="客户名称"></el-table-column>
        <el-table-column prop="createTime" label="创建时间"></el-table-column>
        <el-table-column prop="orderCount" label="订单数量"></el-table-column>
        <el-table-column prop="receivableAmount" label="应收总计"></el-table-column>
        <el-table-column label="操作" width="100">
          <template slot-scope="scope">
            <el-button type="text" size="small" @click="handleManage(scope.row)">管理</el-button>
          </template>
        </el-table-column>
      </el-table>

      <!-- 分页 -->
      <div class="pagination-container">
        <span class="pagination-info">当前第1/50页，每页15条，共500条记录</span>
        <div class="pagination-buttons">
          <el-button size="small">首页</el-button>
          <el-button size="small">上一页</el-button>
          <el-button size="small">下一页</el-button>
          <el-button size="small">尾页</el-button>
          <el-input size="small" v-model="currentPage" style="width: 50px"></el-input>
          <el-button type="primary" size="small">跳转</el-button>
        </div>
      </div>
    </el-card>

    <!-- 对账单管理弹窗 -->
    <el-dialog title="对账单" :visible.sync="dialogVisible" width="80%" :close-on-click-modal="false">
      <div class="reconciliation-detail">
        <!-- 返回按钮 -->
        <div class="back-button">
          <el-button icon="el-icon-back">返回</el-button>
        </div>

        <!-- 基本信息 -->
        <div class="basic-info">
          <el-row :gutter="20">
            <el-col :span="6">
              <div class="info-item">
                <span class="label">对账单号：</span>
                <span class="value">008934893843</span>
              </div>
            </el-col>
            <el-col :span="6">
              <div class="info-item">
                <span class="label">客户名称：</span>
                <span class="value">上海超人电器</span>
              </div>
            </el-col>
            <el-col :span="6">
              <div class="info-item">
                <span class="label">客户名称：</span>
                <span class="value">2016-06-18</span>
              </div>
            </el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col :span="6">
              <div class="info-item">
                <span class="label">运费合计：</span>
                <span class="value">2989.00</span>
              </div>
            </el-col>
            <el-col :span="6">
              <div class="info-item">
                <span class="label">费用合计：</span>
                <span class="value">2989.00</span>
              </div>
            </el-col>
            <el-col :span="6">
              <div class="info-item">
                <span class="label">预付款合计：</span>
                <span class="value">2989.00</span>
              </div>
            </el-col>
            <el-col :span="6">
              <div class="info-item">
                <span class="label">代收货款合计：</span>
                <span class="value">2989.00</span>
              </div>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="6">
              <div class="info-item">
                <span class="label">应收计：</span>
                <span class="value">2989.00</span>
              </div>
            </el-col>
          </el-row>
        </div>

        <!-- 已收金额 -->
        <div class="received-section">
          <div class="section-title">已收金额</div>
          <el-table :data="receivedList" border style="width: 100%">
            <el-table-column type="selection" width="55"></el-table-column>
            <el-table-column prop="amount" label="到账金额"></el-table-column>
            <el-table-column prop="date" label="到账时间"></el-table-column>
          </el-table>
          <div class="table-operations">
            <el-button type="primary" size="small">新增</el-button>
            <el-button type="danger" size="small">删除</el-button>
          </div>
        </div>

        <!-- 应收明细 -->
        <div class="detail-section">
          <div class="section-title">应收明细</div>
          <el-table :data="detailData" style="width: 100%">
            <el-table-column type="selection" width="55"></el-table-column>
            <el-table-column prop="orderNo" label="订单编号"></el-table-column>
            <el-table-column prop="customerName" label="客户名称"></el-table-column>
            <el-table-column prop="signTime" label="签收时间"></el-table-column>
            <el-table-column prop="totalVolume" label="总体积"></el-table-column>
            <el-table-column prop="totalWeight" label="总重量"></el-table-column>
            <el-table-column prop="transportFee" label="运费总计"></el-table-column>
            <el-table-column prop="otherFee" label="费用合计"></el-table-column>
            <el-table-column prop="prepayment" label="预付款"></el-table-column>
            <el-table-column prop="collectAmount" label="代收金额"></el-table-column>
            <el-table-column prop="receivableAmount" label="应收总计"></el-table-column>
            <el-table-column label="操作" width="100">
              <template slot-scope="scope">
                <el-button type="text" size="small">查看</el-button>
              </template>
            </el-table-column>
          </el-table>

          <!-- 分页 -->
          <div class="pagination-container">
            <span class="pagination-info">当前第1/50页，每页15条，共500条记录</span>
            <div class="pagination-buttons">
              <el-button size="small">首页</el-button>
              <el-button size="small">上一页</el-button>
              <el-button size="small">下一页</el-button>
              <el-button size="small">尾页</el-button>
              <el-input size="small" v-model="detailCurrentPage" style="width: 50px"></el-input>
              <el-button type="primary" size="small">跳转</el-button>
            </div>
          </div>
        </div>
      </div>
    </el-dialog>

    <!-- 在第一个弹窗后面添加第二个弹窗 -->
    <el-dialog title="对账明细" :visible.sync="detailDialogVisible" width="80%" :close-on-click-modal="false">
      <div class="order-detail">
        <!-- 基本信息 -->
        <div class="section">
          <div class="section-title">基本信息</div>
          <el-form :model="orderForm" label-width="120px">
            <el-row :gutter="20">
              <el-col :span="12">
                <el-form-item label="订单编号：">
                  <el-input v-model="orderForm.orderNo" disabled></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="客户订单编号：">
                  <el-input v-model="orderForm.customerOrderNo" disabled></el-input>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row :gutter="20">
              <el-col :span="12">
                <el-form-item label="客户名称：">
                  <el-input v-model="orderForm.customerName" disabled></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="客户合同：">
                  <el-select v-model="orderForm.customerContract" disabled style="width: 100%">
                    <el-option label="2005年 上海超人冷链运输合同" value="2005年 上海超人冷链运输合同"></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
            </el-row>
          </el-form>
        </div>

        <!-- 结算信息 -->
        <div class="section">
          <div class="section-title">结算信息</div>
          <el-form :model="orderForm" label-width="120px">
            <el-row :gutter="20">
              <el-col :span="8">
                <el-form-item label="运费单价：">
                  <el-input v-model="orderForm.unitPrice" disabled>
                    <template slot="append">元/千克</template>
                  </el-input>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="运费单价：">
                  <el-input v-model="orderForm.volumePrice" disabled>
                    <template slot="append">元/立方米</template>
                  </el-input>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="运费合计：">
                  <el-input v-model="orderForm.transportFee" disabled>
                    <template slot="append">元</template>
                  </el-input>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row :gutter="20">
              <el-col :span="8">
                <el-form-item label="提货费：">
                  <el-input v-model="orderForm.pickupFee" disabled></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="装卸费：">
                  <el-input v-model="orderForm.handlingFee" disabled></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="包装费：">
                  <el-input v-model="orderForm.packagingFee" disabled></el-input>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row :gutter="20">
              <el-col :span="8">
                <el-form-item label="保险费：">
                  <el-input v-model="orderForm.insuranceFee" disabled></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="中转费：">
                  <el-input v-model="orderForm.transferFee" disabled></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="费用合计：">
                  <el-input v-model="orderForm.totalFee" disabled></el-input>
                </el-form-item>
              </el-col>
            </el-row>

            <!-- 其他费用 -->
            <div class="sub-section">
              <div class="sub-title">其他费用</div>
              <el-table :data="orderForm.otherFees" border style="width: 100%">
                <el-table-column type="selection" width="55"></el-table-column>
                <el-table-column label="费用类型" prop="type"></el-table-column>
                <el-table-column label="发生日期" prop="date"></el-table-column>
                <el-table-column label="金额" prop="amount"></el-table-column>
              </el-table>
            </div>

            <!-- 赔偿金额 -->
            <div class="sub-section">
              <div class="sub-title">赔偿金额</div>
              <el-table :data="orderForm.compensations" border style="width: 100%">
                <el-table-column type="selection" width="55"></el-table-column>
                <el-table-column label="异常单" prop="exceptionNo"></el-table-column>
                <el-table-column label="发生日期" prop="date"></el-table-column>
                <el-table-column label="金额" prop="amount"></el-table-column>
              </el-table>
            </div>

            <el-row :gutter="20">
              <el-col :span="8">
                <el-form-item label="应收总计：">
                  <el-input v-model="orderForm.totalReceivable" disabled></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="预付款：">
                  <el-input v-model="orderForm.prepayment" disabled></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="代收金额：">
                  <el-input v-model="orderForm.collectAmount" disabled></el-input>
                </el-form-item>
              </el-col>
            </el-row>

            <el-form-item label="结算方式：">
              <el-radio-group v-model="orderForm.settlementType" disabled>
                <el-radio label="到货现结">到货现结</el-radio>
                <el-radio label="月结">月结</el-radio>
              </el-radio-group>
            </el-form-item>

            <el-form-item label="银行账户信息：">
              <el-input type="textarea" v-model="orderForm.bankInfo" disabled :rows="3"></el-input>
            </el-form-item>
          </el-form>
        </div>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button @click="detailDialogVisible = false">关闭</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: 'FinanceReconciliation',
  data() {
    return {
      searchForm: {
        reconciliationNo: '',
        customerOrderNo: '',
        customerName: '',
        signDate: '',
        signDateEnd: ''
      },
      customerConfirm: false,
      activeTab: '未确认',
      currentPage: 1,
      tableData: [{
        reconciliationNo: '0990900',
        customerName: '上海亚源',
        createTime: '2015-07-30 20:24:10',
        orderCount: 5,
        receivableAmount: '39.00'
      }],
      dialogVisible: false,
      detailData: [],
      detailCurrentPage: 1,
      detailDialogVisible: false,
      orderForm: {
        orderNo: 'T201606181',
        customerOrderNo: 'AB001001',
        customerName: '2005 上海超人电器有限公司',
        customerContract: '2005年 上海超人冷链运输合同',
        unitPrice: '0.00',
        volumePrice: '0.00',
        transportFee: '0.00',
        pickupFee: '0.00',
        handlingFee: '0.00',
        packagingFee: '0.00',
        insuranceFee: '0.00',
        transferFee: '0.00',
        totalFee: '0.00',
        otherFees: [{
          type: '误工费',
          date: '2016-06-18',
          amount: '220.00'
        }],
        compensations: [{
          exceptionNo: '333434455',
          date: '2016-06-18',
          amount: '220.00'
        }],
        totalReceivable: '0.00',
        prepayment: '0.00',
        collectAmount: '0.00',
        settlementType: '月结',
        bankInfo: '收款单位：上海超人电器有限公司\n开户行：中国交通银行徐汇支行\n账户：989999892348392432'
      },
      confirmedData: {
        reconciliationNo: '008934893843',
        customerName: '上海超人电器',
        date: '2016-06-18',
        transportFee: '2989.00',
        totalFee: '2989.00',
        prepayment: '2989.00',
        collectAmount: '2989.00',
        receivableAmount: '2989.00',
        receivedAmount: '2989.00',
        receivedList: [
          {
            amount: '9000.00',
            date: '2016-06-18'
          },
          {
            amount: '9000.00',
            date: '2016-06-18'
          }
        ]
      }
    }
  },
  methods: {
    handleSearch() {
      console.log('搜索条件：', this.searchForm)
    },
    handleReset() {
      this.searchForm = {
        reconciliationNo: '',
        customerOrderNo: '',
        customerName: '',
        signDate: '',
        signDateEnd: ''
      }
    },
    handleManage(row) {
      this.dialogVisible = true
      // 如果是已确认状态，显示已确认的数据
      if (this.activeTab === '已确认') {
        // 使用 confirmedData 的数据
        this.detailData = [{
          orderNo: '0990900',
          customerName: '上海亚源',
          signTime: '2015-07-30 20:24:10',
          totalVolume: '90.00',
          totalWeight: '39.00',
          transportFee: '90.00',
          otherFee: '39.00',
          prepayment: '90.00',
          collectAmount: '39.00',
          receivableAmount: '39.00'
        }]
        // 设置基本信息
        Object.assign(this.orderForm, {
          reconciliationNo: '008934893843',
          customerName: '上海超人电器',
          date: '2016-06-18',
          transportFee: '2989.00',
          totalFee: '2989.00',
          prepayment: '2989.00',
          collectAmount: '2989.00',
          receivableAmount: '2989.00',
          receivedAmount: '2989.00',
          receivedList: [
            {
              amount: '9000.00',
              date: '2016-06-18'
            },
            {
              amount: '9000.00',
              date: '2016-06-18'
            }
          ]
        })
      }
    },
    handleTabChange(tab) {
      if (tab === '已确认') {
        this.dialogVisible = true
        // 显示已确认状态的数据
        this.detailData = [{
          orderNo: '0990900',
          customerName: '上海亚源',
          signTime: '2015-07-30 20:24:10',
          totalVolume: '90.00',
          totalWeight: '39.00',
          transportFee: '90.00',
          otherFee: '39.00',
          prepayment: '90.00',
          collectAmount: '39.00',
          receivableAmount: '39.00'
        }]
      }
    }
  }
}
</script>

<style scoped>
.finance-reconciliation {
  padding: 20px;
}

.breadcrumb {
  margin-bottom: 20px;
}

.search-card {
  margin-bottom: 20px;
}

.search-title {
  font-size: 14px;
  color: #606266;
  margin-bottom: 20px;
}

.search-form {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.date-separator {
  margin: 0 5px;
}

.table-operations {
  margin-bottom: 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.left-operations {
  display: flex;
  align-items: center;
  gap: 10px;
}

.pagination-container {
  margin-top: 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.pagination-buttons {
  display: flex;
  gap: 10px;
  align-items: center;
}

:deep(.el-card__body) {
  padding: 20px;
}

:deep(.el-form--inline .el-form-item) {
  margin-right: 0;
  margin-bottom: 10px;
}
</style> 